<template>
  <div class="image-show">
    <img 
      :src="require('@/assets/images/'+ fileFilter(fileType) +'.png')" 
      :style="{width:width + 'px',height:height + 'px'}" 
      class="file-img" 
      alt 
      @click="$emit('onClickImage')"
    />
    <slot />
  </div>
</template>

<script>
export default {
  name: "ImageType",
  props: {
    fileType: {
      type: String,
      default: "other"
    },
    width: {
      type: Number,
      default: 30
    },
    height: {
      type: Number
    }
  },
  methods: {
    fileFilter(status) {
      if(status === 'folder') {
        return 'folder'
      }
      if(status === 'shareCenter') {
        return 'shareCenter'
      }
      if(status === 'task') {
        return 'task'
      }
      if(status === 'myShare') {
        return 'myShare'
      }
      if(status === 'infoReport') {
        return 'infoReport'
      }
      if (["bmp", "png", "gif", "jpeg", "jpg"].includes(status)) {
        return "image";
      }
      if (["rmvb", "mp4", "avi", ".ts"].includes(status)) {
        return "video";
      }
      if (["doc", "docx","wps"].includes(status)) {
        return "word";
      }
      if (["xls", "xlsx"].includes(status)) {
        return "excel";
      }
      if (["pdf"].includes(status)) {
        return "pdf";
      }
      if (["rar", "zip", "tar", "gzip", "jar", "iso"].includes(status)) {
        return "zip";
      }
      return "other";
    }
  }
};
</script>
<style lang="scss">
.image-show {
  display: flex;
  align-items: center;
  margin: auto 0;
  cursor: pointer;
  &:hover{
    color: #409eff;
  }
  img {
    vertical-align: middle;
    margin-right: 5px;
  }
}
</style>

